<template>
    <!-- 表格模块-->
    <div class="tableRow">
        <el-row class="select-list" v-permission="'bus:data:query'">
            <el-form :inline="true" ref="selectForm" label-position="right" label-width="80px" :model="selectFormModel"
                size="mini">
                <el-form-item label="标题" prop="name">
                    <el-input v-model="selectFormModel.title" placeholder="标题" clearable
                        @keyup.enter.native="onSearch" />
                </el-form-item>
                <el-form-item label="" prop="searchDate">
                    <el-date-picker
                        v-model="selectFormModel.searchDate"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="options.pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="类别" prop="category">
                    <el-tree-select v-model="selectFormModel.categoryId" :selectParams="dialog.selectParams"
                          :treeParams="dialog.treeParams"
                          @searchFun="searchFun" ref="treeSelect" lazy multiple/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" plain round @click="onSearch">搜索
                    </el-button>
                    <el-button type="warning" icon="el-icon-refresh" size="mini" plain round
                        @click="onRefreshSelectForm()">重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <!-- 表格操作按钮 增删改查-->
        <!-- <el-row class="toolbar">
            <el-button type="info" icon="el-icon-edit" :disabled="dialog.isBatchEditDisabled" size="mini" plain
                @click="handleView" v-permission="'bus:data:view'"> 查看
            </el-button>
            <el-button type="info" icon="el-icon-edit" :disabled="dialog.isBatchEditDisabled" size="mini" plain
                @click="handleDown" v-permission="'bus:data:down'"> 导出
            </el-button>
        </el-row> -->

        <!-- 表格模块 -->
        <data-table ref="dataTable" :api="getDataCommonViewList" :options="options" :columns="columns" :operates="operates"
            :query="selectFormModel" @handle-selection-change="handleSelectionChange" />


        <!-- 弹窗 -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.dialogFormVisible" :modal-append-to-body="false"
            :destroy-on-close="false" @close="closeDialog" width="600px">
            
        </el-dialog>
    </div>
</template>

<!-- 脚本模块  -->
<script lang="ts">

import { Component, Ref, Vue } from 'vue-property-decorator';

import DataTable from '@/components/DataTable/DataTable.vue';

import {
    getDataCommonViewList
} from '@/api/investDataCommon';

import {
  categoryTreeSelectData,
} from '@/api/investCategory';


@Component({ components: { DataTable } })
export default class SurveyData extends Vue {

    //调查数据
    data: Array<any> = [];

    @Ref('treeSelect') private treeSelect: any;
    @Ref('selectForm') private selectForm: any;
    @Ref('dataTable') private dataTable: any;
    private getDataCommonViewList: any = getDataCommonViewList;


    columns: any = [
        {
            label: 'ID',
            prop: 'id',
            hide: true
        },
        {
            label: '类别',
            prop: 'categoryName'
        },
        {
            label: '标题',
            prop: 'title',
            render: function (createElement, row) {

                let elements:any =[];
                if (row && row.row && row.row.title) {

                    const el = createElement("h5", {
                        domProps: { innerHTML: row.row.title},
                        style: {
                            color: '#606266',
                        },
                    });
                    elements.push(el);
                }
                if(row && row.row && row.row.subTitle){
                    const el = createElement("h4", {
                        domProps: { innerHTML: row.row.subTitle},
                        style: {
                            color: '#303133',
                        },
                    });
                    elements.push(el);
                }
                return createElement("div", {class: "box"}, elements)
            }
        },
        {
            label: '填报部门',
            prop: 'departName',
    
        },
        {
            label: '责任区',
            prop: 'areaName',
        },
        {
            label: '行政区划代码',
            prop: 'head01',
        },
        {
            label: '单位负责人',
            prop: 'end01',
        },
        {
        label: '核实状态', prop: 'status', sortable: 'custom', render: function (createElement, row) {
        if (row && row.row && row.row.status === '0') {
          return createElement('el-tag', {
              attrs: {
                type: 'warning'
              }
            }, ['未核实']
          );
        } else if (row && row.row && row.row.status === '1') {
          return createElement('el-tag', {
              attrs: {
                type: 'success'
              }
            }, ['核实不变']
          );
        } else if(row && row.row && row.row.status === '2') {
          return createElement('el-tag', {
              attrs: {
                type: 'danger'
              }
            }, ['核实更新']
          );
        } else{
            return createElement('el-tag', {
              attrs: {
                type: 'danger'
              }
            }, ['未知状态']);
        }
      }
    },
        { label: '创建时间', prop: 'createTime', sortable: 'custom', width: 160, showOverflowTooltip: true }
    ];

    operates: any = {
        width: 200,
        fixed: 'right',
        list: [
            {
                label: '查看',
                type: 'warning',
                icon: 'el-icon-edit',
                plain: true,
                disabled: () => {
                    return false;
                },
                permission: 'bus:data:view',
                method: (index, row) => {
                    this.handleView(index, row);
                }
            },
            {
                label: '导出',
                type: 'danger',
                icon: 'el-icon-delete',
                plain: true,
                disabled: () => {
                    return false;
                },
                permission: 'bus:data:down',
                method: (index, row) => {
                    this.handleDown(index, row);
                }
            }
        ]
    };

    options: any = {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        multipleSelect: true, // 是否支持列表项选中功能
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
    };

    selectFormModel: any = {
        title: '',
        subTitle: '',
        categoryId: 0,
        searchDate:''
    };

    dialog: any = {
        categoryData: [],
        dialogFormVisible: false,
        title: '对话框',
        isEdit: false,
        isBatchEditDisabled: true,
        isBatchRemoveDisabled: true,
        formData: [],
        selectParams: {
            clearable: true,
            placeholder: '请选择类别'
        },
        treeParams: {
            clickParent: true,
            filterable: true,
            accordion: true,
            data: [],
            props: {
                children: 'children',
                label: 'label',
                disabled: 'disabled',
                value: 'id'
            }
        }
    };

    /*编辑*/
    handleView(index: number, row: any) {
       
        this.$router.push({ path: '/bus/surveyView', query: { id: row.id, structureId: row.structureId, departId:row.departId}});
    }


    handleDown(index: number, row: any) {
        this.dialog.title = '下载';
    }

    onSearch(): void {
        this.dataTable.refresh();
    }

    onRefreshSelectForm(): void {
        //恢复搜索默认信息
        this.selectForm.resetFields();
        this.onSearch();
    }

    /*选中事件*/
    handleSelectionChange(val): void {
        if (val) {
            this.dialog.isBatchRemoveDisabled = val.length <= 0;
            this.dialog.isBatchEditDisabled = val.length !== 1;
        }
        console.log("选择" + val);
        this.dialog.formData = val;
    }


    /*关闭对话框*/
    closeDialog() {
        this.$nextTick(() => {
           console.log("aa")
        });
    }

    /*获取数据*/
    searchData() {
        
        getDataCommonViewList().then(response =>{
            this.data = response.data;
        }).catch((e) => {
            console.error(e);
        });

        categoryTreeSelectData().then(response => {
            
            this.dialog.treeParams.data = response.data;
            this.treeSelect.treeDataUpdateFun(response.data);
            //this.treeSelect.refresh();
        }).catch((e) => {
            console.error(e);
        });
    }

    searchFun(value: any): void {
        this.treeSelect.filterFun(value);
    }

    mounted() {
        this.searchData();
    }
}
</script>


<style scoped lang="scss">
.box{
    background-color: #6eac4f;
}
</style>